<template>
  <div class="admin-layout">
    <header class="nav-bar">
      <div class="nav-left">
        <div class="fold-btn" @click="toggleCollapse">
          <i :class="isCollapse ? 'el-icon-s-unfold' : 'el-icon-s-fold'"></i>
        </div>
        <div class="logo-container">
          <div class="logo-icon">
            <img src="/favicon_mask.ico" alt="京剧脸谱" class="mask-icon">
          </div>
          <h1 class="logo" v-show="!isCollapse">京剧苑</h1>
        </div>
      </div>
      <div class="nav-right">
        <div class="nav-tools">
          <el-tooltip content="全屏显示" placement="bottom">
            <i class="el-icon-full-screen tool-icon" @click="toggleFullScreen"></i>
          </el-tooltip>
        </div>
        <el-dropdown trigger="click">
          <div class="admin-info">
            <img :src="avatar" alt="管理员头像" class="avatar" />
            <span class="admin-name">{{ screenName }}</span>
            <i class="el-icon-arrow-down el-icon--right"></i>
          </div>
           <el-dropdown-menu slot="dropdown">
            <el-dropdown-item @click="BackWebHome">
              <router-link to="/" style="text-decoration: none; color: inherit;">
                <i class="el-icon-back"></i> 返回主页
              </router-link>
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </header>
    <div class="main-container">
      <nav class="sidebar" :class="{'is-collapse': isCollapse}">
        <el-menu 
          class="sidebar-menu"
          :default-active="activeMenu"
          :collapse="isCollapse"
          background-color="#001529"
          text-color="#fff"
          active-text-color="#ffd04b"
          unique-opened>
          <el-menu-item index="/dashboard" @click="navigateTo('/AdminHome')">
            <i class="el-icon-odometer"></i>
            <span slot="title">首页</span>
          </el-menu-item>
          
          <!-- 管理员专属菜单项 -->
          <template v-if="isAdmin">
            <el-submenu index="user-management">
              <template slot="title">
                <i class="el-icon-user"></i>
                <span>用户管理</span>
              </template>
              <el-menu-item index="/user/userlist" @click="navigateTo('/user/userlist')">用户列表</el-menu-item>
              <el-menu-item index="/user/rolelist" @click="navigateTo('/user/rolelist')">角色管理</el-menu-item>
            </el-submenu>
          </template>
          
          <!-- 知识管理：管理员和艺术家都可访问 -->
          <el-submenu index="content-management">
            <template slot="title">
              <i class="el-icon-document"></i>
              <span>知识管理</span>
            </template>
            <el-menu-item index="/content/articles" @click="navigateTo('/content/articles')">文章管理</el-menu-item>
            <el-menu-item v-if="isAdmin" index="/content/categories" @click="navigateTo('/content/categories')">分类管理</el-menu-item>
          </el-submenu>
          
          <!-- 论坛管理：管理员和艺术家都可访问 -->
          <el-submenu index="forum-management">
            <template slot="title">
              <i class="el-icon-chat-dot-round"></i>
              <span>论坛管理</span>
            </template>
            <el-menu-item v-if="isAdmin" index="/forum/posts" @click="navigateTo('/forum/posts')">帖子管理</el-menu-item>
            <el-menu-item  index="/forum/topics" @click="navigateTo('/forum/topics')">专题管理</el-menu-item>
            <el-menu-item v-if="isAdmin" index="/forum/comments" @click="navigateTo('/forum/comments')">评论管理</el-menu-item>
          </el-submenu>
          
          <!-- 管理员专属菜单项 -->
          <template v-if="isAdmin">
            <el-submenu index="performance-management">
              <template slot="title">
                <i class="el-icon-video-camera"></i>
                <span>演出管理</span>
              </template>
              <el-menu-item index="/performances/showlist" @click="navigateTo('/performances/showlist')">演出列表</el-menu-item>
              <el-menu-item index="/performances/programlist" @click="navigateTo('/performances/programlist')">节目列表</el-menu-item>
              <el-menu-item index="/performances/programcategory" @click="navigateTo('/performances/programcategory')">节目类别</el-menu-item>
            </el-submenu>
          </template>
          
          <!-- 剧目管理：管理员和艺术家都可访问 -->
          <el-submenu index="drama-management">
            <template slot="title">
              <i class="el-icon-film"></i>
              <span>剧目管理</span>
            </template>
            <el-menu-item index="/drama/list" @click="navigateTo('/drama/list')">剧目列表</el-menu-item>
          </el-submenu>
          
          <!-- 管理员专属菜单项 -->
          <template v-if="isAdmin">
            <el-submenu index="3">
              <template slot="title">
                <i class="el-icon-s-custom"></i>
                <span>艺术家管理</span>
              </template>
              <el-menu-item index="/artists/artist/list" @click="navigateTo('/artists/artist/list')">艺术家列表</el-menu-item>
              <el-menu-item index="/artists/school/list" @click="navigateTo('/artists/school/list')">流派管理</el-menu-item>
              <el-menu-item index="/artists/category/list" @click="navigateTo('/artists/category/list')">行当管理</el-menu-item>
            </el-submenu>
            
            <el-menu-item index="/guestbook" @click="navigateTo('/guestbook')">
              <i class="el-icon-chat-line-square"></i>
              <span slot="title">留言回复</span>
            </el-menu-item>
            
            <el-menu-item index="/announcementlist" @click="navigateTo('/announcementlist')">
              <i class="el-icon-bell"></i>
              <span slot="title">公告管理</span>
            </el-menu-item>
          </template>

        </el-menu>
      </nav>
      <main class="content" :class="{'expanded': isCollapse}">
        <div class="content-header">
          <div class="page-tabs">
            <el-tabs v-model="activeMenu" @tab-click="handleTabClick" type="card" closable @tab-remove="removeTab">
              <el-tab-pane 
                v-for="item in visitedTabs" 
                :key="item.path" 
                :label="item.title" 
                :name="item.path"
                :closable="item.path !== '/AdminHome'">
                <span slot="label">
                  <i :class="item.icon"></i> {{item.title}}
                </span>
              </el-tab-pane>
            </el-tabs>
          </div>
          <div class="header-actions">
            <el-button size="small" icon="el-icon-refresh" circle @click="refreshCurrentPage"></el-button>
            <el-button size="small" type="primary" icon="el-icon-plus" v-if="showAddButton">添加</el-button>
          </div>
        </div>
        <div class="content-body">
          <router-view></router-view>
        </div>
        <footer class="admin-footer">
          <div>京剧苑后台管理系统 &copy; {{ new Date().getFullYear() }} 版权所有</div>
        </footer>
      </main>
    </div>
  </div>
</template>

<script>
export default {
  name: 'AdminHome',
  data() {
    return {
      isCollapse: false,
      avatar: '',
      screenName: '',
      roleType: '',
      isAdmin: false,
      isArtist: false,
      activeMenu: '/AdminHome',
      pageTitle: '首页',
      subPageTitle: '',
      isFullScreen: false,
      activePath: '',
      currentFullPath: '',
      showAddButton: false,
      visitedTabs: [{ path: '/AdminHome', title: '首页', icon: 'el-icon-odometer' }]
    };
  },
  watch: {
    $route: {
      immediate: true,
      handler(to) {
        this.activeMenu = to.path;
        this.currentFullPath = to.path;
        this.setPageTitle(to.path);
        this.addVisitedTab(to.path);
      }
    }
  },
  mounted() {
    // 设置页面标题
    document.title = '京剧苑后台管理系统';
    this.avatar = localStorage.getItem('avatar');
    this.screenName = localStorage.getItem('screenName');
    
    // 检查用户角色
    this.roleType = localStorage.getItem('roletype');
    this.isAdmin = this.roleType === '1';
    this.isArtist = this.roleType === '3';
  },
  methods: {
    toggleCollapse() {
      this.isCollapse = !this.isCollapse;
    },
    navigateTo(path) {
      if (this.$route.path !== path) {
        this.$router.push(path);
      }
    },
    handleTabClick(tab) {
      if (this.$route.path !== tab.name) {
        this.$router.push(tab.name);
      }
    },
    removeTab(targetName) {
      // 找到当前标签索引
      const tabs = this.visitedTabs;
      const currentTab = this.activeMenu;
      const currentIndex = tabs.findIndex(tab => tab.path === currentTab);
      
      // 找到要关闭的标签索引
      const targetIndex = tabs.findIndex(tab => tab.path === targetName);
      
      // 如果要关闭的不是首页
      if (targetName !== '/AdminHome') {
        // 删除标签
        this.visitedTabs.splice(targetIndex, 1);
        
        // 如果关闭的是当前标签，需要激活其他标签
        if (currentTab === targetName) {
          // 如果关闭的是最后一个，则激活前一个
          // 否则激活后一个
          let newActiveIndex;
          if (currentIndex > targetIndex) {
            newActiveIndex = currentIndex - 1;
          } else {
            newActiveIndex = targetIndex === tabs.length ? targetIndex - 1 : targetIndex;
          }
          
          const newActiveTab = tabs[newActiveIndex].path;
          this.activeMenu = newActiveTab;
          this.$router.push(newActiveTab);
        }
      }
    },
    addVisitedTab(path) {
      // 如果路径是首页，不做任何处理
      if (path === '/AdminHome') {
        return;
      }
      
      // 设置当前标签的标题和图标
      const tabInfo = {
        path: path,
        title: this.subPageTitle || this.pageTitle,
        icon: this.getIconForPath(path)
      };
      
      // 检查标签是否已存在
      const isExist = this.visitedTabs.some(item => item.path === path);
      
      // 如果标签不存在且有标题，则添加到已访问标签列表
      if (!isExist && tabInfo.title) {
        this.visitedTabs.push(tabInfo);
      }
    },
    refreshCurrentPage() {
      const currentPath = this.$route.path;
      this.$router.replace('/refresh');
      this.$nextTick(() => {
        this.$router.replace(currentPath);
      });
    },
    getIconForPath(path) {
      if (path.includes('/user')) return 'el-icon-user';
      if (path.includes('/content')) return 'el-icon-document';
      if (path.includes('/forum')) return 'el-icon-chat-dot-round';
      if (path.includes('/performances')) return 'el-icon-video-camera';
      if (path.includes('/drama')) return 'el-icon-film';
      if (path.includes('/artists')) return 'el-icon-s-custom';
      if (path.includes('/announcementlist')) return 'el-icon-bell';
      return 'el-icon-menu';
    },
    setPageTitle(path) {
      // 提取基本路径
      this.activePath = path.split('/').slice(0, 3).join('/');

      // 检查路径是否包含子菜单
      const isSubMenu = path.includes('/contents') || path.includes('/users') || path.includes('/performancess') || path.includes('/media');

      if (isSubMenu) {
        this.pageTitle = '内容管理'; // 或者其他适当的标题
        this.subPageTitle = ''; // 清空子标题
      } else if (path.includes('/performances/showlist')) {
        this.pageTitle = '演出管理';
        this.subPageTitle = '演出列表'; // 添加演出列表的子标题
      } else if (path.includes('/performances/programlist')) {
        this.pageTitle = '演出管理';
        this.subPageTitle = '节目列表'; // 添加演出列表的子标题
      } else if (path.includes('/performances/programcategory')) {
        this.pageTitle = '演出管理';
        this.subPageTitle = '节目类别'; // 添加演出列表的子标题
      } else if (path.includes('/drama/list')) {
        this.pageTitle = '剧目管理';
        this.subPageTitle = '剧目列表';
      } else if (path.includes('/user/userlist')) {
        this.pageTitle = '用户管理';
        this.subPageTitle = '用户列表';
      } else if (path.includes('/user/rolelist')) {
        this.pageTitle = '用户管理';
        this.subPageTitle = '角色管理';
      } else if (path.includes('/user/powerlist')) {
        this.pageTitle = '用户管理';
        this.subPageTitle = '权限设置';
      } else if (path.includes('/content/articles')) {
        this.pageTitle = '内容管理';
        this.subPageTitle = '文章管理';
      } else if (path.includes('/content/categories')) {
        this.pageTitle = '内容管理';
        this.subPageTitle = '分类管理';
      } else if (path.includes('/forum/posts')) {
        this.pageTitle = '论坛管理';
        this.subPageTitle = '帖子管理';
      } else if (path.includes('/forum/topics')) {
        this.pageTitle = '论坛管理';
        this.subPageTitle = '话题管理';
      } else if (path.includes('/forum/comments')) {
        this.pageTitle = '论坛管理';
        this.subPageTitle = '评论管理';
      } else if (path.includes('/guestbook')) {
        this.pageTitle = '留言回复';
        this.subPageTitle = '';
      } else if (path.includes('/artists')) {
        this.pageTitle = '艺术家管理';
        if (path.includes('/artist/list')) {
          this.subPageTitle = '艺术家列表';
        }  else if (path.includes('/school/list')) {
          this.subPageTitle = '流派管理';
        } else if (path.includes('/category/list')) {
          this.subPageTitle = '行当管理';
        } else {
          this.subPageTitle = '';
        }
      }  else if (path.includes('/announcementlist')) {
        this.pageTitle = '公告管理';
        this.subPageTitle = '';
      } else {
        this.pageTitle = '首页';
        this.subPageTitle = '';
      }
    },
    toggleFullScreen() {
      if (!this.isFullScreen) {
        const element = document.documentElement;
        if (element.requestFullscreen) {
          element.requestFullscreen();
        } else if (element.mozRequestFullScreen) {
          element.mozRequestFullScreen();
        } else if (element.webkitRequestFullscreen) {
          element.webkitRequestFullscreen();
        } else if (element.msRequestFullscreen) {
          element.msRequestFullscreen();
        }
      } else {
        if (document.exitFullscreen) {
          document.exitFullscreen();
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen();
        } else if (document.webkitExitFullscreen) {
          document.webkitExitFullscreen();
        } else if (document.msExitFullscreen) {
          document.msExitFullscreen();
        }
      }
      this.isFullScreen = !this.isFullScreen;
    },
    
    BackWebHome() {
      this.$router.push('/');
    }
  },
}
</script>

<style scoped>
/* 整体布局 */
.admin-layout {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: #f5f7fa;
  color: #333;
}

.main-container {
  display: flex;
  min-height: calc(100vh - 60px);
  margin-top: 60px;
}

/* 导航栏 */
.nav-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 16px;
  height: 60px;
  background: #001529;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 1000;
}

.nav-left {
  display: flex;
  align-items: center;
}

.fold-btn {
  padding: 0 16px;
  font-size: 18px;
  color: #fff;
  cursor: pointer;
  transition: color 0.3s;
}

.fold-btn:hover {
  color: #ffd04b;
}

.logo-container {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-left: 8px;
  border-left: 1px solid rgba(255, 255, 255, 0.1);
}

.logo-icon {
  width: 32px;
  height: 32px;
}

.mask-icon {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 0 3px rgba(255, 215, 0, 0.6));
}

.logo {
  font-family: 'STXingkai', 'STZhongsong', serif;
  color: #FFD700;
  font-size: 1.8rem;
  margin: 0;
  text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
  letter-spacing: 2px;
  white-space: nowrap;
  transition: opacity 0.3s;
}

/* 导航工具 */
.nav-right {
  display: flex;
  align-items: center;
}

.nav-tools {
  display: flex;
  align-items: center;
  margin-right: 16px;
}

.tool-icon {
  font-size: 20px;
  color: #fff;
  margin: 0 10px;
  cursor: pointer;
  transition: color 0.3s;
}

.tool-icon:hover {
  color: #ffd04b;
}

.badge-item {
  margin: 0 10px;
}

/* 用户信息 */
.admin-info {
  display: flex;
  align-items: center;
  cursor: pointer;
  padding: 0 12px;
  border-radius: 4px;
  transition: all 0.3s;
  height: 40px;
}

.admin-info:hover {
  background: rgba(255, 255, 255, 0.1);
}

.avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.3);
  object-fit: cover;
}

.admin-name {
  color: #fff;
  margin: 0 8px;
  font-size: 14px;
}

/* 侧边栏 */
.sidebar {
  width: 220px;
  height: 100%;
  background-color: #001529;
  position: fixed;
  top: 60px;
  bottom: 0;
  left: 0;
  z-index: 999;
  transition: all 0.3s;
  overflow-y: auto;
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15);
}

.sidebar.is-collapse {
  width: 64px;
}

.sidebar-menu {
  border-right: none;
  height: 100%;
}

.sidebar-menu:not(.el-menu--collapse) {
  width: 220px;
}

/* 内容区域 */
.content {
  flex: 1;
  margin-left: 220px;
  padding: 20px;
  transition: all 0.3s;
  display: flex;
  flex-direction: column;
}

.content.expanded {
  margin-left: 64px;
}

.content-header {
  background-color: #fff;
  padding: 0 0 8px 0;
  border-radius: 4px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

.page-tabs {
  flex: 1;
}

.header-actions {
  padding: 0 16px;
  display: flex;
  gap: 8px;
}

/* 删除面包屑样式 */
.header-breadcrumb {
  display: none;
}

.content-title {
  display: none;
}

/* 添加标签页样式 */
:deep(.el-tabs--card > .el-tabs__header) {
  border-bottom: 1px solid #e4e7ed;
  margin-bottom: 0;
}

:deep(.el-tabs--card > .el-tabs__header .el-tabs__item) {
  border-left: 1px solid #e4e7ed;
  transition: all 0.3s;
}

:deep(.el-tabs--card > .el-tabs__header .el-tabs__item.is-active) {
  border-bottom-color: #fff;
  background-color: #f8faff;
}

.content-body {
  background-color: #fff;
  padding: 24px;
  border-radius: 4px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
  flex: 1;
}

.admin-footer {
  text-align: center;
  padding: 16px 0;
  color: #666;
  font-size: 14px;
  margin-top: 20px;
}

/* 元素UI组件覆盖样式 */
:deep(.el-menu) {
  border-right: none;
}

:deep(.el-submenu .el-menu-item) {
  min-width: auto;
  padding-left: 50px !important;
}

:deep(.el-menu--collapse) .el-submenu__title span,
:deep(.el-menu--collapse) .el-menu-item span {
  height: 0;
  width: 0;
  overflow: hidden;
  visibility: hidden;
  display: inline-block;
}

:deep(.el-menu--collapse) .el-submenu__icon-arrow {
  display: none;
}

/* 响应式设计 */
@media screen and (max-width: 992px) {
  .sidebar {
    width: 64px;
  }
  .content {
    margin-left: 64px;
  }
  .logo {
    display: none;
  }
}

@media screen and (max-width: 768px) {
  .nav-tools {
    display: none;
  }
  .admin-name {
    display: none;
  }
  .content-header {
    padding: 12px 16px;
  }
  .content-body {
    padding: 16px;
  }
}

@media screen and (max-width: 576px) {
  .content {
    padding: 10px;
  }
  .nav-bar {
    padding: 0 10px;
  }
}
</style>
